/* eslint-disable react-hooks/rules-of-hooks */
import React from 'react';
import { Menu } from 'antd';
import type { GetProp, MenuProps } from 'antd';
import { NavLink } from 'react-router-dom';


type MenuItem = GetProp<MenuProps, 'items'>[number];


const items: MenuItem[] = [
  {
    key: '1',
    icon: <img src="/src/img/01_03.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
    label: '精选推荐',
  },
  {
    key: '2',
    icon: <img src="/src/img/01_06.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
    label: <NavLink to={'/gong'}>工作台</NavLink>,
  },
  {
    key: '3',
    icon: <img src="/src/img/01_08.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
    label: <NavLink to={'/editor'}>创建设计</NavLink>,
  },
  {
    key: '4',
    icon: <img src="/src/img/01_10.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
    label: '偏好设置',
  },
  {
    key: '5',
    icon: <img src="/src/img/01_12.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
    label: '我的收藏',
  },
  {
    type: "group",
    label: <span style={{ fontSize: "12px" }}>创意设计</span>,
    children: [
      {
        key: '6',
        icon: <img src="/src/img/01_14.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        label: 'H5',
      },
      {
        key: '7',
        icon: <img src="/src/img/01_16.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        label: '海报',
      },
      {
        key: '8',
        icon: <img src="/src/img/01_18.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        label: '长页',
      },
      {
        key: '9',
        icon: <img src="/src/img/01_20.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        label: '表单',
      },
      {
        key: '10',
        icon: <img src="/src/img/01_22.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        label: '互动',
      },
      {
        key: '11',
        icon: <img src="/src/img/01_24.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        label: '电子画册',
      },
      {
        key: '12',
        icon: <img src="/src/img/01_26.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        label: '视频',
      },
      {
        key: '13',
        icon: <img src="/src/img/01_28.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        label: 'AI创作',
      },
      {
        key: '14',
        icon: <img src="/src/img/02_03.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        label: '数字人',
      },
      {
        key: '15',
        label: '作图工具',
        icon: <img src="/src/img/02_06.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        children: [
          { key: '16', label: '智能抠图' },
          { key: '17', label: '智能海报' },
          { key: '18', label: '拼图' },
          { key: '19', label: '图片美化' },
          { key: '20', label: '二维码美化' },
          { key: '21', label: '文字云' },
          { key: '22', label: '对话生成器' },
          { key: '23', label: '格式转换器' },
          { key: '24', label: '批量水印' },
        ],
      },
      {
        key: '25',
        label: '营销工具',
        icon: <img src="/src/img/02_08.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        children: [
          { key: '26', label: '短信通知' },
          { key: '27', label: '在线收款' },
          { key: '28', label: '获客活码' },
          { key: '29', label: '节日红包' },
          { key: '30', label: '个人主页' },
        ],
      },
    ]
  },

  {
    type: "group",
    label: <span style={{ fontSize: "12px" }}>其他</span>,
    children: [
      {
        key: '31',
        icon: <img src="/src/img/02_10.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        label: '案例中心',
      },
      {
        key: '32',
        icon: <img src="/src/img/02_12.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        label: '正版素材',
      },
      {
        key: '33',
        icon: <img src="/src/img/02_14.jpg" alt="" style={{ width: "20px", height: "20px" }} />,
        label: '成为设计师',
      },
    ]
  },

];

const App: React.FC = () => {
  const onClick: MenuProps["onClick"] = (e) => {
    console.log("click", e)
  }

  return (
    <>
      <Menu
        style={{ width: 227 }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode='inline'
        onClick={onClick}
        items={items}
      />
    </>
  );
};

export default App;